<!DOCTYPE html>
<html lang="en">

<head>
    <title>提交订单</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
    <script language="JavaScript" src="../../script/common.js"></script>

    <style>
        .address-box {
            display: flex;
            display: -webkit-flex;
            box-sizing: border-box;
            background-color: #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            border-bottom: #d9d9d9 1px solid;
            color: #151516;
        }

        .address-box .address-info {
            margin: 0.5rem;
            line-height: 1rem;
            color: #151516;
        }

        .address-box .address-uname {
            font-size: .8rem;
            font-weight: 500;
        }

        .address-box .address-detail {
            font-size: 0.6rem;
            font-weight: 500;
        }

        .rightarrow {
            margin: 0.8rem 1rem 0 0;
        }

        .rightarrow .aui-icon-right {
            font-size: 1rem;
        }

        .product-box {
            background-color: #fff;
            color: #151516;
        }

        .shoptitle {
            font-size: 0.6rem;
            line-height: 1.6rem;
            text-align: left;
            padding-left: 0.5rem;
        }

        .product-info {
            display: flex;
            justify-content: flex-start;
            padding: 0.5rem;
            background-color: #f5f5f5;
        }

        .product-info .product-logo {
            width: 5rem;
            height: 5rem;
            border: #f2f2f2 solid 1px;
        }

        .product-info .product-des {
            margin-left: 0.5rem;
            color: #151516;
            display: inherit;
            justify-content: flex-start;
            flex-direction: column;
        }

        .product-des .product-title {
            font-size: 0.8rem;
        }

        .product-des .product-attr {
            font-size: 0.6rem;
            color: #9c9c9c;
            height: 2.6rem;
        }

        .product-attr .attr-item {
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .product-des .product-price {
            font-size: 0.8rem;
            color: #151516;
        }

        .pay-type {
            background-color: #fff;
        }

        .aui-list-item {}

        .aui-list-item .weixin-icon {
            background: url("../../image/pay_icon_wexin.png") no-repeat 0 0.3rem;
            background-size: 1.5rem 1.5rem;
            line-height: 2rem;
            padding-left: 2.2rem;
        }

        .aui-list-item .aui-icon-correct {
            font-size: 1rem;
            line-height: 2rem;
            color: #58595b;
            font-weight: 800;
            padding-right: 0.5rem;
        }

        .pay-box {
            position: absolute;
            bottom: 0;
            background-color: #fff;
            line-height: 2.5rem;
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }

        .pay-box .pay-btn {
            width: 6rem;
            background-color: #e02e24;
            color: #fff;
            text-align: center;
        }

        .pay-box .pay-tips {
            font-size: 0.6rem;
            color: #151516;
        }

        .pay-box .pay-amount {
            color: #e02e24;
            font-size: 0.8rem;
            padding-right: 0.6rem;
        }

        .buybox {
            background-color: #fff;
            font-size: 0.8rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            display: flex;
            justify-content: space-between;
            line-height: 2rem;
            position: relative;
        }

        .buybox .buynum {
            padding-right: 1rem;
        }

        .buybox .buyinput {
            width: 1rem !important;
            height: 1rem!important;
            display: inline-block!important;
        }

        .buybox .buybtn-inc {
            display: inline-block;
            text-align: center;
            border-radius: 0.1rem;
            background-color: #f8f8f8;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
        }

        .buybox .buybtn-plus {
            display: inline-block;
            text-align: center;
            border-radius: 0.1rem;
            background-color: #f8f8f8;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
        }

        .coupon select {
            display: inline-block;
            width: 10rem;
            margin-left: 0.2rem;
            font-size: 0.7rem;
        }
    </style>
</head>

<body>
    <div id="ord-box" v-cloak>
  <header class="aui-bar aui-bar-nav" id="pageinit">
      <a class="aui-pull-left aui-btn" onclick="vm.goproduct();">
          <span class="aui-iconfont aui-icon-left"></span>
      </a>
      <div class="aui-title">订单结算</div>
  </header>


        <div class="address-box" v-if="addressinfo.id">
            <div class="address-info">
                <div class="address-uname"> {{addressinfo.cnname}} {{addressinfo.mobile}}</div>
                <div class="address-detail">{{addressinfo.province}}, {{addressinfo.city_level1}},{{addressinfo.city_level2}} {{addressinfo.address}}
                </div>
            </div>
            <div class="rightarrow" @click="selectads">
                <span class="aui-iconfont aui-padded-r-10  aui-icon-right"></span>
            </div>
        </div>

        <div class="address-box" @click="goaddads" v-else>
            <div class="address-info">
                <div class="address-uname aui-iconfont aui-icon-plus"> 手动添加收货地址</div>

            </div>
            <div class="rightarrow" style="margin-top: 0.3rem">
                <span class="aui-iconfont aui-padded-r-10  aui-icon-right"></span>
            </div>
        </div>

        <div>
            <div class="product-box aui-margin-t-10">
                <div class="shoptitle">{{shopinfo.title}}</div>
                <div class="product-info">
                    <div class="product-logo"><img :src="prdinfo.tumb_pic_url" style="height: 100%"></div>
                    <div class="product-des">
                        <div class="product-title">{{prdinfo.title}}</div>
                        <div class="product-attr">
                            <ul>

                                <li class="attr-item" v-for="(v,k) in sku_txt">{{k}}：{{v}}</li>

                            </ul>
                        </div>
                        <div class="product-price">￥{{prd_amount/100}}</div>
                    </div>
                </div>

                <div class="buybox">
                    <div class="buytitle">购买数量</div>
                    <div class="buynum">
                        <span class="buybtn-inc aui-iconfont aui-icon-minus" @click="minbtn"></span>
                        <input type="number" class="buyinput" v-model.number="buynum" maxlength="5" value="1">
                        <span class="buybtn-plus aui-iconfont aui-icon-plus" @click="plusbtn"></span>
                    </div>
                </div>
                <div class="coupon" v-if="coupon_id>0">
                    优惠券 <span style="color:#ee162d">-{{coupon_amount/100}}</span>元
                </div>
            </div>

            <div class="pay-type aui-content">
                <ul class="aui-list">
                  <li>演示版请用测试支付</li>
                  <li class="aui-list-item" v-for="item in paytype_list" @click="changepaytype(item)">
                    <div :class="item.icon"> {{item.name}} </div><span :class="pay_type==item.pay_type ? 'aui-iconfont aui-icon-correct' : ''"></span>
                  </li>

                </ul>
            </div>

            <div class="pay-box aui-content" @click="payorder">
                <span class="pay-tips">实付款</span>
                <span class="pay-amount">￥{{payamount/100}}</span>
                <span class="pay-btn">立即支付</span>
            </div>
        </div>

    </div>
    <script language="javascript">

        var vm = new Vue({
            el: '#ord-box',
            data: {
              paytype_list:[
                  {'name':'测试支付','pay_type':'testpay','icon':'weixin-icon'},
                 {'name':'微信支付','pay_type':'weixin','icon':'weixin-icon'},

            ],
                product_id: 0,
                prdinfo: {},
                shopinfo: {},
                sku_txt: [],
                coupon_id: 0, //优惠券id
                coupon_amount: 0,
                couponlist: [], //优惠券列表
                prd_amount: 0, //商品价
                buymod: "", //购买模式
                buynum: 1, //购买数量
                payamount: 0,
                skuprice_id: 0,
                addressid: 0,
                orderno: "",
                addressinfo: {},
                pay_type: 'testpay',
                   postparam:{},
            },

            methods: {
              changepaytype:function(item){
              this.pay_type = item.pay_type;
          },
              goproduct:function(){
                closewin();
              //  $page.openwin('product_productinfo','./productinfo.html',{id:this.product_id});
              },
                selectads: function() {
                    var param = {
                        product_id: this.product_id,
                        sku_id: this.skuprice_id,
                        buymod: this.buymod,
                        orderno: this.orderno,
                        buynum: this.buynum
                    };
                    $page.openwin('home_address', '../home/address.html', param)
                },
                changeprice: function() {
                    var postparam = {
                        product_id: vm.product_id,
                        sku_price_id: vm.skuprice_id,
                        orderno: this.orderno,
                        buymod: this.buymod,
                        buy_num: this.buynum,
                        platform: 'web',
                        coupon_id: this.coupon_id,
                        addressid: this.addressid,
                        pay_type: this.pay_type
                    };
                    $page.get_data("/api/order/getOrderAmount", 'post', postparam, function(ret) {
                        var res = ret.data;
                        vm.coupon_id = res.coupon_id;
                        vm.coupon_amount = res.coupon_amount;
                        vm.payamount = res.payamount;
                    });


                },
                goaddads: function() {
                    var param = {
                        product_id: this.product_id,
                        sku_id: this.skuprice_id,
                        buymod: this.buymod,
                        orderno: this.orderno,
                        buynum: this.buynum
                    };
                    $page.openwin('home_address', '../home/address.html', param);
                },
                minbtn: function() {
                    if (this.buynum > 1) {
                        this.buynum = this.buynum - 1;
                        this.changeprice();
                        // this.payamount = this.prd_amount * this.buynum;
                    }
                },
                plusbtn: function() {
                    this.buynum = this.buynum + 1;
                    if(this.prdinfo.limit_num>0 && this.buynum>this.prdinfo.limit_num){
                      this.buynum = this.prdinfo.limit_num;
                        $page.toast('本商品限购'+this.prdinfo.limit_num+"件");
                        return;
                    }
                    this.changeprice();
                    //this.payamount = this.prd_amount * this.buynum;
                },
                load_init: function() {
                    //默认地址
                    $page.get_data('/api/address/getOrderUsed', 'post', {
                        id: this.addressid,
                        token:$api.getStorage('token')
                    }, function(ret) {
                        vm.addressinfo = ret.data;
                        vm.addressid = ret.data['id'];
                    });

                    //商品信息
                    $page.get_data('/api/product/getInfoBySku', 'post', {
                        id: this.product_id,
                        sku_id: this.skuprice_id
                    }, function(ret) {
                        vm.prdinfo = ret.data;
                        vm.shopinfo = ret.data.shopinfo;
                        if (vm.buymod == "directbuy") {
                            vm.prd_amount = vm.prdinfo['directbuy_price'];
                        } else {
                            vm.prd_amount = vm.prdinfo['pin_price'];
                        }
                        vm.payamount = vm.prd_amount * vm.buynum;
                        vm.sku_txt = vm.prdinfo.sku_txt;

                    });
                },

                payorder: function() { //提交支付订单
                  this.postparam = {
                     product_id: this.product_id,
                     sku_price_id: this.skuprice_id,
                     orderno: this.orderno,
                     buymod: this.buymod,
                     buy_num: this.buynum,
                     platform: 'app',
                     token:  $api.getStorage('token'),
                     coupon_id: this.coupon_id,
                     addressid: this.addressid,
                     pay_type: this.pay_type
                 };
                  switch(this.pay_type){
                   case 'weixin':
                       vm.weixinpay();
                       break;
                   case 'testpay':
                       vm.testpay();
                   }
                  },
                  testpay:function()
         {
             $page.get_data('/api/order/create','post',
                 this.postparam,function (ret) {
                     console.log(ret);
                     if(ret.errno!==1000){
                         $page.toast(ret.errmsg);
                          return false;
                     }else{
                          $page.openwin('home_orderdetail','../home/orderdetail.html',{id:ret.data.orderid});
                      }
                 });
         },
                weixinpay:function(){


                   if (this.pay_type === "weixin") {
                       this.postparam.trade_type = 'APP';
                   }
                   $page.get_data('/api/order/create', 'post',
                       this.postparam,
                       function(ret) {
                           if (ret.errno !== 1000) {
                               $page.toast('异常('+ret.errmsg+')');
                                return false;
                           } else { //提交成功,跳转到订单详情页
                               var cfg = ret.data;
                               var wxPay = api.require('wxPay');
                               wxPay.payOrder({

                                   orderId: cfg.orderId,
                                   mchId: cfg.mchId,
                                   nonceStr: cfg.noceStr,
                                   timeStamp: cfg.timeStamp,
                                   package: cfg.package,
                                   sign: cfg.sign
                               }, function(ret, err) {
                                   console.log(JSON.stringify(ret));
                                   if (ret.status) {
                                        $page.openwin('home_orderdetail','../home/orderdetail.html',{id:cfg.orderId});
                                       //支付成功
                                   } else {
                                      $page.toast('微信支付异常(code:'+err.code+')');

                                   }
                               });
                               console.log("createorder");
                           }
                       });
                  }


            }
        });
        apiready = function() {
            var pageParam = api.pageParam;
            console.log(JSON.stringify(pageParam));
            vm.product_id = pageParam.product_id;
            vm.buymod = pageParam.buymod;
            vm.buynum = pageParam.buynum;
            vm.skuprice_id = pageParam.sku_id;
            vm.orderno = pageParam.orderno;

            if (pageParam.addressid) {
                vm.addressid = pageParam.addressid;
            }
            vm.load_init();
        }
    </script>
</body>

</html>
